<template>
    <div class="water-charge">
        <c-wrap title="用水曲线">

            <div class="break"></div>
            <div style="background:#eee;padding: 20px">
                <Row>
                    <Card :bordered="false">
                        <div id="charts" style="width:100%;height: 250px;">
                            <div id="main" :style="{width:'100%',height:'100%'}"></div>
                        </div>
                    </Card>
                </Row>
                <Row style="margin-top: 20px">
                    <Card :bordered="false">
                        <div id="charts1" style="width:100%;height: 250px;">
                            <div id="main1" :style="{width:'100%',height:'100%'}"></div>
                        </div>
                    </Card>
                </Row>
                <Row style="margin-top: 20px">
                    <div style="background-color: lightblue" @click="clickDetail">
                        查看上月详情
                    </div>
                </Row>
            </div>
        </c-wrap>
    </div>
</template>

<script>
    import 'echarts/theme/macarons.js'
    import 'echarts/theme/shine.js'
    import 'echarts/theme/infographic.js'
    import CWrap from '../../components/CWrap'

    export default {
        name: "terminalDataEcharts",
        data() {
            return {
                height: app.config.setting.height.display - app.config.setting.height.top - 228,
                dateVal: new Date(this.$route.params.month),
                swipe: {
                    price: 0,
                    volume: 0
                },
                data: [],
                dateRoute:this.$route.params.month


            }
        },
        components: {CWrap},
        methods: {
            drawline() {
                var myChart = this.$echarts.init(document.getElementById('main'), 'macarons');
                var myChart1 = this.$echarts.init(document.getElementById('main1'), 'shine');

                app.ajax.get(app.config.api.terminal.dataHistory + '/bar/volumeDay', {

                    days: 15
                }, (res) => {
                    this.data = res.data;
                    myChart.setOption({
                        title: {
                            text: '近15天用水',
                            textStyle: {
                                fontFamily: '黑体',
                                fontSize: 16,
                            }
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },

                        legend: {
                            data: []
                        },
                        yAxis: {type: 'value'},
                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            data: this.data.xAxis,
                        }],
                        series: [{
                            name: "用水",
                            type: 'line',
                            data: this.data[res.data.series[0].name],
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        }],
                    })
                });

                app.ajax.get(app.config.api.statistics.detail, {
                    month: app.util.localStorage('dateRoute')
                }, (res) => {
                    let date = [];
                    let dataMonth = [];
                    res.data.list.forEach((val) => {
                        date.push(val.date);
                        dataMonth.push(val.volume);
                    });
                    let monthSplice = this.$route.params.month;
                    let a = '';
                    if (monthSplice != null||monthSplice!=[]) {
                        a=monthSplice.toString().substring(5);
                        myChart1.setOption({
                            title: {
                                text: a + '月用水',
                                textStyle: {
                                    fontFamily: '黑体',
                                    fontSize: 16,
                                }
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    mark: {show: true},
                                    dataView: {show: true, readOnly: false},
                                    magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            legend: {
                                data: []
                            },
                            yAxis: {type: 'value'},
                            xAxis: [{
                                type: 'category',
                                boundaryGap: false,
                                data: date,
                            }],
                            series: [{
                                name: "用水",
                                type: 'bar',
                                data: dataMonth,
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            }],
                        })
                    }else {
                        myChart1.setOption({
                            text: '暂无数据',
                            effect:'bubble',
                            effectOption : {
                                effect: {
                                    n: 0 //气泡个数为0
                                }
                            },
                            textStyle: {
                                fontSize: 32,
                                fontWeight: 'bold'
                            }

                        })
                    }
                })

            },
            clickDetail(){
                this.$router.push({
                    name: 'paymentDetail',
                    params: {
                        id: '用水曲线',
                        month: this.$route.params.month
                    }
                })
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.drawline()
            })
            /*ECharts图表*/

        }
    }
</script>

<style scoped>

</style>




